<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <el-row>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path:'/person'}">人员管理</el-breadcrumb-item>
                    <el-breadcrumb-item>{{menuName}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>

            <el-row :class="navBarFixed == true ? 'navBarWrap' :''" class="mt20">

                <el-col :span="16" style="transform: translate(2%, 25%);">

                    <el-button class="stepBtn" @click="jump1('basic')" icon="el-icon-coordinate"
                               circle="">基础信息
                    </el-button>

                    <el-button class="stepBtn" @click="jump1('detail')"
                               icon="el-icon-office-building"
                               circle="">详细信息
                    </el-button>

                    <el-button class="stepBtn" @click="jump1('card')"
                               icon="el-icon-office-building"
                               circle="">证件信息
                    </el-button>

                </el-col>

                <el-col align="right" :span="8">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button type="primary" @click="savePersonFn"
                                   style="transform: translate(-50%, 25%);">保存
                        </el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button type="danger" @click="resetForm('baseform')" style="transform: translate(-50%, 25%);">
                            重置
                        </el-button>
                    </div>
                </el-col>

                <div class="clearfix"></div>
            </el-row>

            <el-row class="mt20">

                <el-row id="basic">
                    <el-col :span="6" class="ml20">
                        <h1>基础信息</h1>
                    </el-col>
                </el-row>

                <el-form :model="person" class="mt30" label-width="145px" ref="baseform">
                    <el-row>
                        <el-col :span="8" align="left">
                            <el-form-item label="分组:" prop="group" :rules="required">
                                <el-cascader
                                        v-model="person.group"
                                        :options="groups"
                                        :show-all-levels="false"
                                        :props="{value: 'id', label: 'name',  checkStrictly: true,expandTrigger: 'hover' }"
                                        style="width: 200px" clearable></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="人员类型：" prop="type" :rules="required">
                                <el-select v-model="person.type" clearable class="size-full" style="width: 200px">
                                    <el-option label="未设置" :value="0"></el-option>
                                    <el-option label="常规人员" :value="1"></el-option>
                                    <el-option label="驾驶员" :value="2"></el-option>
                                    <el-option label="加盟人员" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" align="left">
                            <el-form-item label="姓名:" prop="name" :rules="required">
                                <el-input
                                        v-model="person.name"
                                        style="width: 200px"
                                        placeholder="请输入姓名"
                                        :maxlength="10"
                                        show-word-limit
                                        :clearable="true"
                                        @input="getAbbr"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="姓名拼音：" prop="pinyin" :rules="required">
                                <el-input
                                        v-model="person.pinyin"
                                        style="width: 200px"
                                        placeholder="请输入姓名拼音"
                                        :maxlength="20"
                                        show-word-limit
                                        :clearable="true"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="拼音缩写：" prop="abbr" :rules="required">
                                <el-input
                                        v-model="person.abbr"
                                        style="width: 200px"
                                        placeholder="请输入拼音缩写"
                                        :maxlength="20"
                                        show-word-limit
                                        :clearable="true"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="部门：" prop="duties">
                                <el-select v-model="person.dept" style="width: 200px" clearable  class="size-full">
                                    <el-option v-for="(item,index) in departments" :key="index" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="员工工号：" prop="code" :push="1" :rules="required">
                                <el-input
                                        v-model="person.code"
                                        style="width: 200px"
                                        placeholder="请输入员工工号"
                                        :maxlength="20"
                                        show-word-limit
                                        :clearable="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="员工卡号：" prop="cardNo" :push="1" :rules="required">
                                <el-input
                                        v-model="person.cardNo"
                                        style="width: 200px"
                                        placeholder="请输入员工卡号"
                                        :maxlength="20"
                                        show-word-limit
                                        :clearable="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="person.type==2">
                        <el-col :span="7">
                            <el-form-item label="线路：" prop="route">
                                <el-select v-model="person.route" clearable class="size-full" style="width: 200px">
                                    <el-option :label="item.name" v-for="(item,index) in routes" :key="index" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="支线：" prop="line">
                                <el-select v-model="person.line" clearable class="size-full" style="width: 200px">
                                    <el-option :label="item.name" v-for="(item,index) in lines" :key="index" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7" >
                            <el-form-item label="籍贯：" prop="nativeName">
                                <el-select v-model="person.native" style="width: 200px" clearable>
                                    <el-option v-for="(item, index) in nativePlaces" :key="index"
                                               :label="item.name"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="职务：" prop="duties">
                                <el-select v-model="person.duty" style="width: 200px" clearable>
                                    <el-option v-for="(item, index) in dutuies" :key="index" :label="item.name"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="民族：" prop="nation">
                                <el-select v-model="person.nation" style="width: 200px" clearable>
                                    <el-option v-for="item in nations" :key="item.value" :label="item.name"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="婚姻：" prop="duties">
                                <el-select v-model="person.marriage" style="width: 200px" clearable>
                                    <el-option label="未设置" :value="0"></el-option>
                                    <el-option label="未婚" :value="1"></el-option>
                                    <el-option label="已婚" :value="2"></el-option>
                                    <el-option label="离异" :value="3"></el-option>
                                    <el-option label="丧偶" :value="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="性别：" prop="sex">
                                <el-select v-model="person.gender" style="width: 200px" placeholder="您的性别">
                                    <el-option v-for="(item, index) in genders" :value="item.value" :key="index"
                                               :label="item.label">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="学历：" prop="sex">
                                <el-select v-model="person.edu" style="width: 200px">
                                    <el-option label="未设置" :value="0"></el-option>
                                    <el-option label="小学" :value="1"></el-option>
                                    <el-option label="初中" :value="2"></el-option>
                                    <el-option label="高中" :value="3"></el-option>
                                    <el-option label="大专" :value="4"></el-option>
                                    <el-option label="本科" :value="5"></el-option>
                                    <el-option label="硕士" :value="6"></el-option>
                                    <el-option label="博士" :value="7"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                <el-row>
                    <el-col :span="7" >
                        <el-form-item label="出生日期：" prop="dateOfBirth">
                            <el-date-picker
                                    style="width: 200px;"
                                    v-model="person.dateOfBirth"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="请输入出生日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :push="1">
                        <el-form-item label="启用状态：" prop="disabled">
                            <el-radio-group v-model="person.disabled">
                                <el-radio :label="0">已启用</el-radio>
                                <el-radio :label="1">已停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                </el-form>

                <!-- <el-tab-pane label="详细信息" :disabled="editData.add === 1" name="2">-->
                <el-row id="detail">
                    <el-col :span="6" class="ml20">
                        <h1>详细信息</h1>
                    </el-col>
                </el-row>
                <el-form label-width="145px" class="mt30" :model="person" ref="editForm2">
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="移动电话：" prop="phone">
                                <el-input
                                        v-model="person.phone"
                                        type="number"
                                        style="width: 200px"
                                        placeholder="请输入移动电话"
                                        :maxlength="11"
                                        show-word-limit
                                        :clearable="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="办公电话：" prop="tel">
                                <el-input
                                        v-model="person.tel"
                                        type="number"
                                        style="width: 200px"
                                        placeholder="请输入办公电话"
                                        :maxlength="11"
                                        show-word-limit
                                        :clearable="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="邮      箱：" prop="email">
                                <el-input
                                        v-model="person.email"
                                        type="text"
                                        style="width: 200px"
                                        placeholder="请输入邮箱"
                                        :maxlength="20"
                                        show-word-limit
                                        :clearable="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="工作单位：">
                                <el-input v-model="person.WorkUnit"
                                          style="width: 200px"
                                          placeholder="请输入工作单位"
                                          :maxlength="15"
                                          show-word-limit
                                          :clearable="true">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="通讯地址：">
                                <el-input v-model="person.address"
                                          style="width: 200px"
                                          placeholder="请输入通讯地址"
                                          :maxlength="25"
                                          show-word-limit
                                          :clearable="true">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="工作年限：" prop="dateOfBirth">
                                <el-date-picker
                                        style="width: 200px;"
                                        v-model="person.dateOfWork"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        type="datetime"
                                        placeholder="请输入工作年限">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <!-- <el-tab-pane label="证件信息" :disabled="editData.add === 1" name="3">-->
                <el-row id="card">
                    <el-col :span="6" class="ml20">
                        <h1>证件信息</h1>
                    </el-col>
                </el-row>
                <el-form label-width="145px" class="mt30" :model="person" ref="editForm3" >
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="身份证号：" prop="idcard" :rules="required1">
                                <el-input
                                        v-model="person.idcard"
                                        style="width: 230px"
                                        placeholder="请输入身份证号"
                                        :maxlength="18"
                                        show-word-limit
                                        :clearable="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-form-item label="员工照片：" prop="LicenseNo1">
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-upload
                                    :action="config.baseURL + '/api/web/file/upload/'"
                                    list-type="picture-card"
                                    :on-remove="handleRemove1"
                                    :limit="1"
                                    :file-list="image1"
                                    :show-file-list=true
                                    :on-exceed="handleExceed"
                                    :on-success="image1Success">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-form-item label="身份证正面：" prop="LicenseNo1">
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-upload
                                    :action="config.baseURL + '/api/web/file/upload/'"
                                    list-type="picture-card"
                                    :on-remove="handleRemove2"
                                    :limit="1"
                                    :file-list="image2"
                                    :on-exceed="handleExceed"
                                    :on-success="image2Success">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-form-item label="身份证反面：" prop="LicenseNo1">
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-upload
                                    :action="config.baseURL + '/api/web/file/upload/'"
                                    list-type="picture-card"
                                    :on-remove="handleRemove3"
                                    :limit="1"
                                    :file-list="image3"
                                    :on-exceed="handleExceed"
                                    :on-success="image3Success">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-col>
                        <!--可以设置hover 对话框显示-->
                        <!-- <el-dialog :visible.sync="dialogVisible">
                             <img width="100%" :src="dialogImageUrl" alt="">
                         </el-dialog>-->
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="驾驶证号：" prop="LicenseNo1">
                                <el-input
                                        v-model="person.licenseNo1"
                                        style="width: 230px"
                                        placeholder="请输入驾驶证号"
                                        :maxlength="18"
                                        show-word-limit
                                        :clearable="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="准驾车型：">
                                <el-select
                                        v-model="license"
                                        style="width: 230px;"
                                        multiple
                                        collapse-tags
                                        placeholder="准驾车型">
                                    <el-option label="未设置" :value="0x00"></el-option>
                                    <el-option label="A1" :value="0x0001"></el-option>
                                    <el-option label="A2" :value="0x0002"></el-option>
                                    <el-option label="A3" :value="0x0004 "></el-option>
                                    <el-option label="B1" :value="0x0008"></el-option>
                                    <el-option label="B2" :value="0x0010"></el-option>
                                    <el-option label="C1" :value="0x0020"></el-option>
                                    <el-option label="C2" :value="0x0040"></el-option>
                                    <el-option label="C3" :value="0x0080"></el-option>
                                    <el-option label="C4" :value="0x0100"></el-option>
                                    <el-option label="C5" :value="0x0200"></el-option>
                                    <el-option label="D" :value="0x0400"></el-option>
                                    <el-option label="E" :value="0x0800"></el-option>
                                    <el-option label="F" :value="0x1000"></el-option>
                                    <el-option label="M" :value="0x2000"></el-option>
                                    <el-option label="N" :value="0x4000"></el-option>
                                    <el-option label="P" :value="0x8000"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="初次领证日期：" prop="regDate1">
                                <el-date-picker style="width: 230px;"
                                                v-model="person.regDate1"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                type="datetime"
                                                placeholder="请输入初次领证日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="有效期至：">
                                <el-date-picker style="width: 230px;"
                                                v-model="person.expiryDate1"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                type="datetime"
                                                placeholder="请输入证件有效期">
                                </el-date-picker>
                            </el-form-item>

                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-form-item label="驾驶证正面：" prop="image4">
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-upload
                                    :action="config.baseURL + '/api/web/file/upload/'"
                                    list-type="picture-card"
                                    :on-remove="handleRemove4"
                                    :limit="1"
                                    :file-list="image4"
                                    :on-exceed="handleExceed"
                                    :on-success="image4Success">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-form-item label="驾驶证反面：" prop="image5">
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-upload
                                    :action="config.baseURL + '/api/web/file/upload/'"
                                    list-type="picture-card"
                                    :on-remove="handleRemove5"
                                    :limit="1"
                                    :file-list="image5"
                                    :on-exceed="handleExceed"
                                    :on-success="image5Success">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="道路运输资格证号：" prop="licenseNo2">
                                <el-input
                                        v-model="person.licenseNo2"
                                        style="width: 230px"
                                        placeholder="请输入资格证号"
                                        :maxlength="18"
                                        show-word-limit
                                        :clearable="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="初次领证日期：" prop="regDate2">
                                <el-date-picker style="width: 230px;"
                                                v-model="person.regDate2"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                type="datetime"
                                                placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :push="1">
                            <el-form-item label="有效期至：" prop="ExpiryDate2">
                                <el-date-picker
                                        style="width: 230px;"
                                        v-model="person.expiryDate2"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        type="datetime"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-form-item label="运输资格证正面：" prop="image6">
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-upload
                                    :action="config.baseURL + '/api/web/file/upload/'"
                                    list-type="picture-card"
                                    :on-remove="handleRemove6"
                                    :limit="1"
                                    :file-list="image6"
                                    :on-exceed="handleExceed"
                                    :on-success="image6Success">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-form-item label="运输资格证反面：" prop="image7">
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :push="0" style="vertical-align: middle">
                            <el-upload
                                    :action="config.baseURL + '/api/web/file/upload/'"
                                    list-type="picture-card"
                                    :on-remove="handleRemove7"
                                    :limit="1"
                                    :file-list="image7"
                                    :show-file-list=true
                                    :on-exceed="handleExceed"
                                    :on-success="image7Success">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-col>
                    </el-row>
                    <el-row class="mt30">
                        <el-col :span="2" style="vertical-align: middle">
                            <el-form-item label="备注：" prop="remarks">
                                <el-input style="width: 500px" v-model="person.remarks" type="textarea" :maxlength="30"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {savePerson, getNativePlaces, getDutuies, getDepartments, getGroupTree, findRouteByGroup,getLastEmpId,findLineByRoute} from "@/api/";
    import {jump} from "../../../../utils/common";
    import vPinyin from "../../../../utils/vue-py";
    import config from '@/utils/config';
    export default {
        name: "index",
        data() {
            return {
                config,
                person: {},
                nativePlaces: [],
                departments: [],
                dutuies: [],
                genders: [
                    {
                        label: "男",
                        value: 1,
                    },
                    {
                        label: "女",
                        value: 2,
                    },
                    {
                        label: "未知",
                        value: 0,
                    },
                ],
                menuName: "",
                required: {
                    required: true,
                    message: '此输入框必填',
                    trigger: 'blur'
                },
                required1:[
                    {required: true, message:'请输入手机号', trigger: "blur"},
                    {pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message:'请输入正确的手机号!', trigger: "blur"}
                ],
                active: "1",
                image1: [],
                image2: [],
                image3: [],
                image4: [],
                image5: [],
                image6: [],
                image7: [],
                license: [],

                navBarFixed: false,
                groups: [],
                routes: [],
                lines: [],
                nations: ["未设置", "汉族", "蒙古族", "回族", "藏族", "维吾尔族", "苗族", "彝族", "壮族", "布依族", "朝鲜族", "满族", "侗族", "瑶族", "白族",
                    "土家族", "哈尼族", "哈萨克族", "傣族", "黎族", "傈僳族", "佤族", "畲族", "高山族", "拉祜族", "水族", "东乡族", "纳西族", "景颇族", "柯尔克孜族", "土族",
                    "达斡尔族", "仫佬族", "羌族", "布朗族", "撒拉族", "毛南族", "仡佬族", "锡伯族", "阿昌族", "普米族", "塔吉克族", "怒族", "乌孜别克族", "俄罗斯族", "鄂温克族",
                    "德昂族", "保安族", "裕固族", "京族", "塔塔尔族", "独龙族", "鄂伦春族", "赫哲族", "门巴族", "珞巴族", "基诺族"],
            }

        },
        created() {
            if (this.$route.query.menuName != null) {
                this.menuName = this.$route.query.menuName
                if (this.menuName == "添加人员") {
                    this.init()
                }
            }
            this.getNativePlacesFn()
            this.getDutuiesFn()
            this.getDepartmentsFn()
            let nationsArray = []
            for (let i = 0; i < this.nations.length; i++) {
                nationsArray.push({name: this.nations[i], value: i})
            }
            this.nations = nationsArray
        },
        watch: {

            //根据所选分组获取相关线路信息
            'person.group': function () {
                if (this.person.group.hasOwnProperty('length') == false) {
                    findRouteByGroup(this.person.group != 0 ? this.person.group : -1).then(res => {
                        this.routes = res.data
                    })
                } else {
                    if (this.person.group.length == 0) {
                        this.person.route = ''
                        this.routes = []
                    } else {
                        findRouteByGroup(this.person.group != 0 ? this.person.group[this.person.group.length - 1] : -1).then(res => {
                            this.routes = res.data
                        })
                    }
                }
            },
            //根据所选路线获取相关支线信息
            'person.route': function () {
                if (this.person.route.hasOwnProperty('length') == false) {
                    findLineByRoute(this.person.route != 0 ? this.person.route : -1).then(res => {
                        this.lines = res.data
                    })
                } else {
                    if (this.person.route.length == 0) {
                        this.person.line = ''
                        this.lines = []
                    } else {
                        findLineByRoute(this.person.route != 0 ? this.person.route[this.person.route.length - 1] : -1).then(res => {
                            this.lines = res.data
                        })
                    }
                }
            },

        },
        methods: {
            getLastEmpIdFn(){
                getLastEmpId(this.person.cardNo).then(res => {
                    if (res != null && res.code == 200) {
                        this.person.cardNo = this.person.cardNo
                    } else {
                        return require(res.msg)
                    }
                })
            },
            //站点拼音缩写
            getAbbr() {
                this.person.pinyin = vPinyin.chineseToPinYin(this.person.name)
                let SX = '';
                for (var i = 0; i < this.person.pinyin.length; i++) {
                    var c = this.person.pinyin.charAt(i);
                    if (/^[A-Z]+$/.test(c)) {
                        SX += c;
                    }
                }
                this.person.abbr = SX;
            },

            //数组并运算
            sum(arr) {
                var s = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    s = s | arr[i];
                }
                return s;
            },

            // 获取当前权限下所有分组
            getGroupTreeFn() {
                getGroupTree({}).then(res => {
                    this.groups = res.data.children
                })
            },

            //锚点跳转
            jump1(data) {
                jump(data)
            },

            // 初始化数据
            init() {
                this.person = {}
                this.image1 = []
                this.image2 = []
                this.image3 = []
                this.image4 = []
                this.image5 = []
                this.image6 = []
                this.image7 = []
            },

            //移除照片
            handleRemove1(file, image1) {
                this.person.image1 = ''

            },

            //移除照片
            handleRemove2(file, image2) {
                this.person.image2 = ''

            },

            //移除照片
            handleRemove3(file, image3) {
                this.person.image3 = ''

            },

            //移除照片
            handleRemove4(file, image4) {
                this.person.image4 = ''

            },

            //移除照片
            handleRemove5(file, image5) {
                this.person.image5 = ''

            },

            //移除照片
            handleRemove6(file, image6) {
                this.person.image6 = ''

            },

            //移除照片
            handleRemove7(file, image7) {
                this.person.image7 = ''

            },

            getDutuiesFn() {
                getDutuies().then(res => {
                    if (res != null && res.code == 200) {
                        this.dutuies.push({id: 0, name: '未设置'})
                        if (res.data.length != 0) {
                            for (let i = 0; i < res.data.length; i++) {
                                this.dutuies.push(res.data[i])
                            }
                        }
                    }
                })

            },
            getDepartmentsFn() {
                getDepartments().then(res => {
                    if (res != null && res.code == 200) {
                        this.departments.push({id: 0, name: '未设置'})
                        if (res.data.length != 0) {
                            for (let i = 0; i < res.data.length; i++) {
                                this.departments.push(res.data[i])
                            }
                        }
                    }
                })
            },
            //员工照片
            //身份证正面
            //身份证反面
            //驾驶证正面
            //驾驶证反面
            //道路运输从业资格证正面
            //道路运输从业资格证反面
            image1Success(res) {
                if (res != null && res.code == 200) {
					console.log(res);
                    this.person.image1 = res.data
                }
            },
            getNativePlacesFn() {
                getNativePlaces().then(res => {
                    if (res != null && res.code == 200) {
                        this.nativePlaces.push({id: 0, name: '未设置'})
                        if (res.data.length != 0) {
                            for (let i = 0; i < res.data.length; i++) {
                                this.nativePlaces.push(res.data[i])
                            }
                        }
                    }
                })

            },
            image2Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image2 = res.data
                }
            },
            image3Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image3 = res.data
                }
            },
            image4Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image4 = res.data
                }
            },
            image5Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image5 = res.data
                }
            },
            image6Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image6 = res.data
                }
            },
            image7Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image7 = res.data
                    console.log(this.person.image7)
                }
            },

            handleExceed() {
                this.$message.warning("最多可上传1张图片");
            },

            savePersonFn() {
                /*this.getLastEmpIdFn();*/
                this.person.native1 = this.person.native
                this.person.license = this.sum(this.license)

                this.$refs["baseform"].validate((valid) => {
                    if (valid) {
                        if (this.person.group.hasOwnProperty('length')) {
                            if (this.person.group.length != 0) {
                                this.person.group = this.person.group[this.person.group.length - 1]
                            }
                        }
                        console.log(this.person)
                        savePerson(this.person).then(res => {
                            if (res != null && res.code == 200) {
                                this.$message.success("保存成功")
                                this.$router.push('/person')
                                this.$store.dispatch('tagsView/delView', {path: '/person/edit'})
                            } else {
                                this.$message.success(res.msg)
                            }
                        })
                    }
                })

            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getDisabled(disabled) {
                if (disabled != null) {
                    return disabled.toString()
                }
            },

            getBirth(date) {
                if (date != null) {
                    return date.slice(0, 10);
                }
            },

            //导航条效果
            watchScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                //  当滚动超过 50 时，实现吸顶效果
                if (scrollTop > 120) {
                    this.navBarFixed = true
                } else {
                    this.navBarFixed = false
                }
            },
        },
        mounted() {
            if (this.$route.query.person != null) {
                this.person = this.$route.query.person
                //照片回显
                if (this.person.image1 != '' && this.person.image1 != null) {
                    this.image1.push({'url': window.gConfig.uploadURL + this.person.image1})
                }
                if (this.person.image2 != '' && this.person.image2 != null) {
                    this.image2.push({'url': window.gConfig.uploadURL + this.person.image2})
                }
                if (this.person.image3 != '' && this.person.image3 != null) {
                    this.image3.push({'url': window.gConfig.uploadURL + this.person.image3})
                }
                if (this.person.image4 != '' && this.person.image4 != null) {
                    this.image4.push({'url': window.gConfig.uploadURL + this.person.image4})
                }
                if (this.person.image5 != '' && this.person.image5 != null) {
                    this.image5.push({'url': window.gConfig.uploadURL + this.person.image5})
                }
                if (this.person.image6 != '' && this.person.image6 != null) {
                    this.image6.push({'url': window.gConfig.uploadURL + this.person.image6})
                }
                if (this.person.image7 != '' && this.person.image7 != null) {
                    this.image7.push({'url': window.gConfig.uploadURL + this.person.image7})
                }

                //驾照类型
                if ((this.person.license & 0x00) != 0) {
                    this.license.push(0x00)
                }
                if ((this.person.license & 0x0001) != 0) {
                    this.license.push(0x0001)
                }
                if ((this.person.license & 0x0002) != 0) {
                    this.license.push(0x0002)
                }
                if ((this.person.license & 0x0004) != 0) {
                    this.license.push(0x0004)
                }
                if ((this.person.license & 0x0008) != 0) {
                    this.license.push(0x0008)
                }
                if ((this.person.license & 0x0010) != 0) {
                    this.license.push(0x0010)
                }
                if ((this.person.license & 0x0020) != 0) {
                    this.license.push(0x0020)
                }
                if ((this.person.license & 0x0040) != 0) {
                    this.license.push(0x0040)
                }
                if ((this.person.license & 0x0080) != 0) {
                    this.license.push(0x0080)
                }
                if ((this.person.license & 0x0100) != 0) {
                    this.license.push(0x0100)
                }
                if ((this.person.license & 0x0200) != 0) {
                    this.license.push(0x0200)
                }
                if ((this.person.license & 0x0400) != 0) {
                    this.license.push(0x0400)
                }
                if ((this.person.license & 0x0800) != 0) {
                    this.license.push(0x0800)
                }
                if ((this.person.license & 0x1000) != 0) {
                    this.license.push(0x1000)
                }
                if ((this.person.license & 0x2000) != 0) {
                    this.license.push(0x2000)
                }
                if ((this.person.license & 0x4000) != 0) {
                    this.license.push(0x4000)
                }
                if ((this.person.license & 0x8000) != 0) {
                    this.license.push(0x8000)
                }
            }

            this.getGroupTreeFn()

            // 事件监听滚动条
            window.addEventListener('scroll', this.watchScroll)
        },
    }
</script>

<style>
    .el-form-item {
        line-height: 135px;
    }

    .navBarWrap {
        position: fixed;
        top: 72px;
        right: 10px;
        left: 230px;
        z-index: 100;
        background-color: #ffffff;
        color: #000000;
        border-bottom: 1px solid #dcdfe6;
    }
</style>
